<template>
  <view class="service-recommend">
    <view class="recommend-header">
      <view class="header-left">
        <view class="chatIcon icon-zan"></view>
        <text>服务推荐</text>
      </view>
      <!-- <view class="recommend-count">{{ serviceList.length }}</view> -->
    </view>

    <scroll-view scroll-x class="service-scroll" :show-scrollbar="false">
      <view class="service-list">
        <view 
          v-for="(item, index) in serviceList" 
          :key="index"
          class="service-item"
          @tap="handleServiceClick(item)"
        >
          <image 
            class="service-image" 
            :src="item.image" 
            mode="aspectFill"
          />
          <text class="service-title">{{ item.title }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 服务列表数据
const serviceList = ref([
  {
    title: '老人居家护理',
    image: '/static/images/service1.png',
    id: 1
  },
  {
    title: '老人居家护理',
    image: '/static/images/service2.png',
    id: 2
  },
  {
    title: '老人居家护理',
    image: '/static/images/service3.png',
    id: 3
  }
]);

// 点击服务项
const handleServiceClick = (service: any) => {
  emit('select', service);
};

const emit = defineEmits(['select']);
</script>

<style scoped lang="scss">
$theme-color: #ffc549;

.service-recommend {
  background-color: #fff;
  border-radius: 12rpx;
  margin: 20rpx;
  padding: 20rpx;
}

.recommend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .header-left {
    display: flex;
    align-items: center;
    gap: 10rpx;
    font-size: 32rpx;
    font-weight: bold;
    
    .chatIcon {
      font-size: 40rpx;
      color: $theme-color;
    }
  }
  
  .recommend-count {
    background-color: $theme-color;
    color: #fff;
    padding: 4rpx 16rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
  }
}

.service-scroll {
  width: 100%;
  white-space: nowrap;
}

.service-list {
  display: inline-flex;
  padding: 10rpx 0;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20rpx;
  width: 200rpx;
  
  &:last-child {
    margin-right: 0;
  }
  
  .service-image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 12rpx;
    background-color: #f5f5f5;
  }
  
  .service-title {
    font-size: 28rpx;
    color: #333;
    margin-top: 10rpx;
    width: 100%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
